<template>
    <div ref="parentText">父组件中的内容</div>
    <Child msg="来自父组件" :arr="[1, 2, 3]" @numAdd="add" ref="child"/>
    <p>{{ num }}</p>
    <button v-for="text in texts" :key="text" @click="showText = text">{{ text }}</button>
    <component :is="showText"></component>
    <Card>
        <p>卡片内容</p>
    </Card>
    <Moddle v-model="message" :obj="obj" class="font" v-slot="slotProps">
        {{ slotProps.childNum }}
    </Moddle>
    <p>{{ message }}</p>
</template>

<script>
    import Child from './components/Child.vue'
    import TextA from './components/TextA.vue'
    import TextB from './components/TextB.vue'
    import Moddle from './components/Moddle.vue'

    export default {
        name: 'Parent',
        components: {
            Child, TextA, TextB, Moddle
        },
        data() {
            return {
                num : 0,
                showText: "TextA",
                texts: ["TextA", "TextB"],
                message: "hello",
                obj : {
                    'a' : 'A1',
                    'b' : 'B2',
                    'c' : 'C3'
                }
            }
        },
        methods: {
            add(i) {
                console.log(i)
                this.num = i
            },
            showText() {
                console.log(this.$refs.parentText.textContent)
            }
        }
    }
</script>

<style>
  .font {
    font-size: 20px;
    background-color: red;
    width: 100px;
    height: 100px;
  }
</style>